<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<c:set var="ctx" value="${pageContext.request.contextPath}"/>

<html>
<head>
    <title>维护</title>
    <!-- import Vue.js -->
    <script src="//vuejs.org/js/vue.min.js"></script>
    <!-- import stylesheet -->
    <link rel="stylesheet" href="//unpkg.com/iview/dist/styles/iview.css">
    <!-- import iView -->
    <script src="//unpkg.com/iview/dist/iview.min.js"></script>
    <script src="//unpkg.com/axios/dist/axios.min.js"></script>
</head>
<body>
<div id="app">
    <i-table width="1000" height="500" border :columns="columns" :data="items"></i-table>
</div>
<script>
    const app = new Vue({
        el: '#app',
        data: {
            columns: [
                {
                    title: 'OpenId',
                    key: 'openId',
                    width: 300,
                    fixed: 'left'
                },
                {
                    title: 'PLC',
                    key: 'bonus',
                    width: 200
                },
                {
                    title: '昵称',
                    key: 'nickname',
                    width: 200
                },
                {
                    title: '手机号',
                    key: 'mobile',
                    width: 200
                },
                {
                    title: '操作',
                    key: 'action',
                    fixed: 'right',
                    width: 120,
                    render: (h, params) => {
                        return h('div', [
                            h('Button', {
                                props: {
                                    type: 'text',
                                    size: 'small'
                                },
                                on: {
                                    click: function () {
                                        app.clearUserData(params.row["openId"])
                                    }
                                }
                            }, '清除数据'),
                        ]);
                    }
                }
            ],
            items: []
        },
        mounted: function () {
            this.initUserData();
        },
        methods: {
            clearUserData: function (openId) {
                axios.post('${ctx}/bitcoin-data/api/user/test/clearData/' + openId).then(function (response) {
                    if (response.status == 200) {
                        if (response.data.code != -1) {
                            app.$Message.success("清除完成")
                            app.initUserData();
                        } else {
                            let message = response.data.msg;
                            if (message) {
                                message = "清除失败"
                            }
                            app.$Message.error(message)
                        }
                    } else {
                        app.$Message.error(response.status)
                    }
                })
            },
            initUserData: function () {
                let thisVue = this;
                //取得测试用户列表
                axios.get("${ctx}/bitcoin-data/api/user/test").then(function (response) {
                    thisVue.items = response.data
                })
            }
        }
    })
</script>
</body>
</html>
